<template>
  <div>
    <top-header :isLeft="true" title="选择地址"></top-header>
    <div class="city_search">
      <a-input placeholder="小区/写字楼/学校等" v-model="search_val">
        <a-icon slot="prefix" type="search"></a-icon>
      </a-input>

    </div>
    <div class="area">
      <ul class="area_list" v-for="(item, index) in areaList" :key="index">
        <li @click="selectAddress(item)">
          <h4>{{item.name}}</h4>
          <p>{{item.district}}{{item.address}}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import TopHeader from '../components/TopHeader.vue'
export default {
  components:{
    TopHeader
  },
  data() {
    return {
      search_val:"",
      areaList:[]
    }
  },
  computed:{
    tempAddress(){
      return this.$store.getters.tempAddress
    }
  },
  watch:{
    search_val(){
      this.searchPlace()
    },
  },
  methods: {
    searchPlace(){
      const self=this;
      AMap.plugin('AMap.Autocomplete', function(){
        // 实例化Autocomplete
        var autoOptions = {
          //city 限定城市，默认全国
          city: self.city,
        }
        var autoComplete= new AMap.Autocomplete(autoOptions);
        autoComplete.search(self.search_val, function(status, result) {
          // 搜索成功时，result即是对应的匹配数据
          console.log(result);
          self.areaList=result.tips;
        })
      })
    },
    selectAddress(item){
      if (item) {
        this.tempAddress.address_location=item.district+item.address+item.name;
        this.$router.push({name:"AddAddress"})
      }
    }
  },
}

</script>
<style lang="scss" scoped>
.address{
  width: 100%;
  height: 100%;
  overflow: auto;
  box-sizing: border-box;
  padding-top: 45px;
}
.city_search{
  background-color: #fff;
  padding: 10px 20px;
  color: #333;
}
.area{
  margin-top: 16px;
  background:#fff;
}
.area li{
  border-bottom: 1px solid #eee;
  padding: 8px 16px;
  color: #aaa;
}
.area li h4{
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}
</style>